<template>
  <view class="sk-container">
    <view class="wrap">
      <scroll-view scroll-y="true" class="scrollbox" lower-threshold="50" style="height:642px;" upper-threshold="50">
        <view class="listbox">
          <view class="key-list" style="border: none;">
            <view class="listrow relative" style="border: none;">
              <view class="shrink0">
                <image class="line sk-image" :src="offline" mode="aspectFill"></image>
              </view>
              <view class="shrink1 sk-transparent">
                高科花园西门
        <!--        <view class="lockstatus">
                  <image class="line sk-image" :src="offline" mode="aspectFill"></image>
                </view> -->
              </view>
              <view class="shrink2 sk-transparent" data-index="0" data-adminid="4" @click="goShare">
                <view class="cuIcon-settings iconli sk-pseudo sk-pseudo-circle"></view>钥匙管理</view>
            </view>
            <view class="list-content sk-transparent sk-text-14-2857-156 sk-text">永不过期</view>
            <view class="list-footer" style="border: none;">
              <view class="listrow">
                <view class="opendoor sk-transparent" data-adminid="1" data-lockid="354" @click="opendoor">
                  <view class="cuIcon-lock iconli sk-pseudo sk-pseudo-circle"></view>开门
                </view>
                <view class="shrink1"></view>
                <view class="shrink2 sk-transparent sk-text-33-7037-792 sk-text" @click="del_manageKey" data-adminid="1" data-lockid="354">移除钥匙</view>
              </view>
            </view>
          </view>
          <view class="key-list" style="border: none;">
            <view class="listrow relative" style="border: none;">
              <view class="shrink0">
                <image class="line sk-image" :src="offline" mode="aspectFill"></image>
              </view>
              <view class="shrink1 sk-transparent sk-text-33-7037-146 sk-text">
                嘉天国际北门
              </view>
              <view class="shrink2 sk-transparent" data-index="1" @click="goShare">
                <view class="cuIcon-settings iconli sk-pseudo sk-pseudo-circle"></view>钥匙管理</view>
            </view>
            <view class="list-content sk-transparent sk-text-14-2857-747 sk-text">永不过期</view>
            <view class="list-footer" style="border: none;">
              <view class="listrow">
                <view class="opendoor sk-transparent" data-adminid="1"  data-locationcheck="0" data-lockid="352" @click="opendoor">
                  <view class="cuIcon-lock iconli sk-pseudo sk-pseudo-circle"></view>开门
                </view>
                <view class="shrink1"></view>
                <view class="shrink2 sk-transparent sk-text-33-7037-812 sk-text" @click="del_manageKey" data-adminid="1" data-lockid="352">移除钥匙</view>
              </view>
            </view>
          </view>

          <view class="key-list" style="border: none;">
            <view class="listrow relative" style="border: none;">
              <view class="shrink0">
                <image class="line sk-image" :src="offline" mode="aspectFill"></image>
              </view>
              <view class="shrink1 sk-transparent sk-text-33-7037-63 sk-text">
                开发演示设备
              </view>
              <view class="shrink2 sk-transparent" data-index="4" @click="goShare">
                <view class="cuIcon-settings iconli sk-pseudo sk-pseudo-circle" ></view>钥匙管理</view>
            </view>
            <view class="list-content sk-transparent sk-text-14-2857-924 sk-text">永不过期</view>
            <view class="list-footer" style="border: none;">
              <view class="listrow">
                <view class="opendoor sk-transparent" data-adminid="1" data-locationcheck="0" data-lockid="335" @click="opendoor">
                  <view class="cuIcon-lock iconli sk-pseudo sk-pseudo-circle"></view>开门
                </view>
                <view class="shrink1"></view>
                <view class="shrink2 sk-transparent sk-text-33-7037-922 sk-text" @click="del_manageKey" data-adminid="1" data-lockid="335">移除钥匙</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
	
	<view class="cu-modal" :class="openDoorFlag==true?'show':''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">温馨提示</view>
				<view class="action" @tap="_cancleCall()">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding-xl">
				您确认{{curMachine.machineName}}开门? 开门次数有限,请勿频繁操作！
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action margin-0 flex-sub  solid-left" @tap="_cancleOpenDoor()">取消</view>
				<view class="action margin-0 flex-sub text-green solid-left" @tap="_doOpenDoor()">确认开门</view>
			</view>
		</view>
	</view>
	
	<view class="cu-modal" :class="delOwnerMemberFlag==true?'show':''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">温馨提示</view>
				<view class="action" @tap="_cancleCall()">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding-xl">
				您确认移除此钥匙？
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action margin-0 flex-sub  solid-left" @tap="_cancleDeleteOwnerMember()">取消</view>
				<view class="action margin-0 flex-sub text-green solid-left" @tap="_doDeleteOwnerMember()">确认</view>
			</view>
		</view>
	</view>
	
	<view class="footer">
		<div @click="addKey">添加钥匙</div>
		<div @click="openRecord">开门记录</div>
	</view>
  </view>
</template>


<script>
	const app = getApp()
	export default {
		data() {
			return {
				openDoorFlag:false, //开门弹窗
				delOwnerMemberFlag:false, // 删除弹窗
				openid: '',
				userInfo: {},
				hasUserInfo: false,
				looding: '../../static/looding.gif',
				lock_close: '../../static/lock_close.png',
				lock_open: '../../static/lock_open.png',
				offline: '../../static/offline.png',
				online: '.../../static/online.png',
				successimg: '../../static/success.png',
				successadimg: '../../static/success.png',
				hidelood: false,
				nodata: false,
				listarr: [],
				onlyimg: '../../images/ad.jpg',
				hitshowminiad: false,
			}
		},
		onShow: function() {
			console.log('index-onShow');
			var that = this;
			console.log(app.globalData,"用户信息")
			// if (app.globalData.userid < 1) {
			// 	that.login();
			// } else {
			// 	that.getmore(1, that.data.num, 0);
			// }
		},
		onLoad: function() {
			var that = this;
		},
		
		// })
		methods: {

			addKey() {
				uni.navigateTo({
					url: "./addKey"
				})
			},
			openRecord() {
				uni.navigateTo({
					url: "./openRecord"
				})
			},
			_cancleCall: function() {
				this.delOwnerMemberFlag = false;
			},
			del_manageKey:function(){
				this.delOwnerMemberFlag = true;
				this.curOwnerMember = item;
			},
			_cancleDeleteOwnerMember:function(item){
				this.delOwnerMemberFlag = false;
			},
			_doDeleteOwnerMember:function(){
				let that = this;
				console.log("<<<<<<<<<<<<",this.communityId)
				this.curOwnerMember.communityId = this.communityId;
				deleteOwnerMember(this.curOwnerMember)
				.then((res)=>{
					uni.showToast({
						icon:'none',
						title:'删除成功'
					});
					that._cancleDeleteOwnerMember();
					that._initData();
				},(err)=>{
					uni.showToast({
						icon:'none',
						title:err
					});
					that._cancleDeleteOwnerMember();
				})
			},
			opendoor:function(_machine){
				this.openDoorFlag = true;
				// this.curMachine = _machine;
			},
			_cancleOpenDoor:function(){
				this.openDoorFlag = false;
				// this.curMachine = {};
			},
			_doOpenDoor:function(){
				let _that = this;
				uni.showLoading({
					title: '请求中'
				});
				openDoor({
					communityId:this.communityId,
					userRole:'owner',
					machineCode:_that.curMachine.machineCode,
					userId:this.memberId
				}).then((res)=>{
					uni.hideLoading();
					let data = res.data;
					let msg = '';
					if(data.code == 0){
						msg = '请求发送至门禁'
					}else{
						msg = data.msg;
					}
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					});
					_that._cancleOpenDoor();
				},(err)=>{
					uni.hideLoading();
					uni.showToast({
						title: '开门失败',
						icon: 'none',
						duration: 2000
					});
					_that._cancleOpenDoor();
				})
			},
			
			  closemask: function () {
			    this.setData({
			      close: true,
			      listlen: 0
			    })
			  },
			
			  goShare: function (e) {
				  console.log("分享钥匙")
			    var adminid = e.currentTarget.dataset['adminid']; // 锁管理员user_id
			    var lock_id = e.currentTarget.dataset['lockid']; //
				uni.navigateTo({
					url: './sharekeys'
				})
			  },
			  allopenlogs: function (e) {
			    var lock_id = e.currentTarget.dataset['lockid']; //
			   uni.navigateTo({
			      url: '../allopenlogs/allopenlogs?lock_id=' + lock_id
			    })
			  },
			  getAdmin: function () {
			    wx.request({
			      url: app.globalData.domain + '/api/Member/viewuserid',
			      method: 'POST',
			      header: {
			        "Authorization": resa.data.token
			      },
			      data: {
			        member_id: app.globalData.userid
			      },
			      success: function (resb) {
			        //console.log(resb);
			        if (resb.data.status == 200) {
			          var tmpuser_id = resb.data.data.user_id;
			          if (tmpuser_id != '') {
			            app.globalData.user_id = resb.data.data.user_id;
			          }
			        }
			      }
			    })
			  },
			  onShareAppMessage: function () {
			    return {
			      title: app.globalData.xcxname,
			      imageUrl: app.globalData.domain + app.globalData.shareImg,
			      path: "/pages/index/index"
			    };
			  },
			  onShareTimeline: function () {
			    return {
			      title: app.globalData.xcxname,
			      imageUrl: app.globalData.domain + app.globalData.shareImg,
			    }
			  }
		}
	}
</script>

<style lang="scss" scoped>
	.sk-container{
		width: 100%;
		height: 100%;
	}

	.wrap {
		width: 100%;
		height: calc(100vh - 100rpx);
		overflow: auto;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.mscan {
		text-align: center;
		position: fixed;
		top: 40%;
		left: 50%;
		margin-left: -80rpx;
	}

	.micon {
		font-size: 80rpx;
		color: #21cf3e;
	}

	.wz {
		font-size: 13rpx;
	}

	.line {
		width: 48rpx;
		height: 48rpx;
		position: relative;
		top: 6rpx;
		right: 3rpx;
	}

	.listrow {
		display: flex;
		flex-direction: row;
		padding-left: 14rpx;
		border-bottom: 1rpx solid #e3e3e3;
		position: relative;
		height: 45rpx;
		line-height: 45rpx;
	}

	.list-footer .listrow {
		border-bottom: 0;
	}

	.shrink0 {
		flex-shrink: 0;
		width: 70rpx;
		color: #333;
		font-size: 24rpx;
		text-align: center;
	}

	.opendoor {
		width: 200rpx;
	}

	.shrink1 {
		flex-shrink: 1;
		width: 80%;
		height: 48rpx;
		    line-height: 56rpx;
		font-size: 24rpx;
	}

	.shrink2 {
		flex-shrink: 0;
		width: 150rpx;
		color: #333;
		font-size: 24rpx;
	}

	.shrink3 {
		flex-shrink: 0;
		width: 240rpx;
	}

	.sharebtn {
		width: 140rpx;
		height: 76rpx;
		line-height: 76rpx;
		background-color: #ffffff;
		font-size: 24rpx;
	}

	.sharebtn::after {
		border: 0;
	}

	.btnbox {
		display: flex;
		flex-direction: row;
		margin-top: 60rpx;
	}

	.btn1 {
		width: 180rpx;
		height: 72rpx;
		line-height: 72rpx;
		border: 1rpx solid green;
		border-radius: 20rpx;
		color: #000;
		margin-left: 30rpx;
		font-size: 24rpx;
	}

	.lgbtn {
		width: 180rpx;
		height: 72rpx;
		line-height: 72rpx;
		border: 1px solid green;
		border-radius: 20rpx;
		color: #ffffff;
		background-color: green;
		font-size: 24rpx;
	}

	.cuIcon-lock {
		font-size: 20rpx;
		color: #000;
		margin-left: 10rpx;
	}

	.right {
		float: right;
	}

	.clear {
		clear: both;
	}

	.c_09bb07 {
		color: #09bb07;
	}

	.c_ffbe00 {
		color: #ffbe00;
	}

	.c_f43530 {
		color: #f43530;
	}

	.c_f76260 {
		color: #f76260;
	}

	.text-center {
		text-align: center;
		margin: 0rpx !important;
		padding: 0rpx !important;
	}

	.key-list {
		box-sizing: border-box;
		padding: 28rpx;
		border: 1rpx solid #efeff4;
		border-radius: 10rpx;
		color: #333;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.key-list a {
		color: #333;
	}

	.list-title {
		box-sizing: border-box;
		display: block;
		margin: 0;
		font-size: 24rpx;
		border-bottom: 1rpx solid #efeff4;
		height: 46rpx;
		line-height: 46rpx;
		padding: 0 15rpx;
	}

	.list-content {
		padding: 10rpx;
		margin-left: 10rpx;
		margin-bottom: 6rpx;
		margin-top: 6rpx;
		color: #666;
		font-size: 24rpx;
	}

	.list-footer {
		border-top: 1rpx solid #efeff4;
		font-size: 24rpx;
	}

	.fullmask {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: #000;
		opacity: .5;
		filter: alpha(opacity=50);
		z-index: 1000;
	}

	.maskbox {
		width: 480rpx;
		height: 600rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -240rpx;
		margin-top: -300rpx;
		background-color: #fff;
		z-index: 1001;
		border-radius: 20rpx;
		text-align: center;
	}

	.tiptitle {
		font-size: 12pt;
		text-align: center;
		font-weight: bold;
		padding-top: 60rpx;
		margin-bottom: 20rpx;
	}

	.subtitle {
		color: #666;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.fullmask2 {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: #000;
		opacity: .5;
		filter: alpha(opacity=50);
		z-index: 1000;
	}

	.adbox {
		height: 980rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-top: -490rpx;
		background-color: #fff;
		z-index: 1001;
		border-radius: 20rpx;
		text-align: center;
		padding: 40rpx 0;
	}

	.greentip {
		font-size: 12rpx;
		color: green;
		margin-bottom: 30rpx;
	}

	.img1 {
		margin: 0 auto 6rpx;
		height: 300rpx;
	}

	.img2 {
		margin: 0 auto 6rpx;
		height: 300rpx;
	}

	.miniad {
		width: 100%;
		margin: 0 auto;
	}

	.miniad ad {
		margin: 0 auto;
	}

	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
		top: 40rpx;
		right: 0;
		width: 440rpx;
		background-color: #fff;
		border: 1rpx solid #e3e3e3;
		border-radius: 20rpx;
		z-index: 300;
		padding: 10rpx 10rpx 10rpx 0;
	}

	.absolute .li {
		width: 50%;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 30rpx;
		font-size: 24rpx;
		float: left;
	}

	.absolute .imgli {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 6rpx;
		margin-right: 8rpx;
	}

	.hide {
		display: none;
	}

	.iconli {
		font-size: 24rpx;
		display: inline-block;
		margin-right: 8rpx;
	}

	.nodatabox {
		text-align: center;
	}

	.adbox2 {
		height: 980rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-top: -490rpx;
		z-index: 1002;
	}

	.onlyimg {
		width: 100%;
		height: 980rpx;
	}

	.lockstatus {
		font-size: 12rpx;
		display: inline-block;
		margin-right: 8rpx;
		margin-left: 8rpx;
	}

	.lockstatus.cuIcon-unlock {
		color: #04be02;
	}
	.footer{
		width: 100%;
		height: 90rpx;
		display:flex;
		justify-content: space-around;
		align-items: center;
		div{
			width: 40%;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
		}
	}
</style>
